<!--
 * @Author: Mark
 * @Date: 2019-01-29 16:41:32
 * @LastEditors: Mark
 * @LastEditTime: 2019-01-31 14:21:01
 * @Description: 富文本编辑器CKEditor5的封装
 -->
<template>
  <div class="vue-ck-editor">
    <ckeditor
      :editor="editor"
      :config="editorConfig"
      @ready="onReady"
      @blur="onEditorBlur"
      @focus="onEditorFocus"
      v-model="editorData"
    ></ckeditor>
  </div>
</template>

<script>
    import DecoupledEditor from '@ckeditor/ckeditor5-build-decoupled-document';
    import '@ckeditor/ckeditor5-build-decoupled-document/build/translations/zh-cn'
    export default {
        props:{
          //从父亲组件传递过来的初始化富文本的信息
          initeditorData : '' 
        },
        data() {
            return {
                editorData : '在此输入内容！',
                editor: DecoupledEditor,
                //配置属性
                editorConfig :{
                  //上传文件的地址
                  ckfinder:{
                    uploadUrl: '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files&responseType=json',
                  },
                  //语言
                  language :'zh-cn'
                }
                
            };
        },
        methods: {
            onReady( editor )  {
                // Insert the toolbar before the editable area.
                editor.ui.view.editable.element.parentElement.insertBefore(
                    editor.ui.view.toolbar.element,
                    editor.ui.view.editable.element
                );
                this.editorData = this.initeditorData;
            },

            /**
             * 失去焦点的事件
             */
            onEditorBlur(){
              this.$emit('editor-blur',this.editorData)
            },

            /**
             * 获取焦点的事件
             */
            onEditorFocus(){
              if(this.editorData=='在此输入内容！'){
                this.editorData = ''
              }
            }
        }
    }
</script>

<style>
.vue-ck-editor {
  height: 100%;
  width: 100%;
  text-align: left;
  font-size: 20px;
}
.vue-ck-editor .ck-content{
  padding: 0 25px;
  border: 1px solid #bfbfbf;
}
</style>